<template>
  <!-- 排行榜页面中右侧页面 -- 头部组件 -->
  <div class="list-head">
    <div class="img">
      <img src="./img/1.jpg" alt="排行榜图片">
    </div>
    <div class="info">
      <p class="title">飙升榜</p>
      <div class="info-md">
        <i class="icon"></i>
        <span>最近更新：04月13日</span>
        <span>（刚刚更新）</span>
      </div>
      <div class="info-btn">
        <div class="it-1">
          <a href="javascript:;" title="播放" class="a-1">
            <span>播放</span>
          </a>
          <a href="javascript:;" title="添加到播放列表" class="a-2"></a>
        </div>
        <div class="it-2">
          <a href="javascript:;">
            <span>(3912457)</span>
          </a>
        </div>
        <div class="it-3">
          <a href="javascript:;">
            <span>(12078)</span>
          </a>
        </div>
        <div class="it-4">
          <a href="javascript:;">
            <span>下载</span>
          </a>
        </div>
        <div class="it-5">
          <a href="javascript:;">
            <span>(211713)</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name:'list-head'
}
</script>

<style scoped lang="scss">
  .list-head{
    width: 100%;
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    .img{
      padding: 3px;
      border: 1px solid #ccc;
      width: 150px;
      height: 150px;
      img{
        width: 150px;
        height: 150px;
      }
    }
    .info{
      margin-left: 30px;
      width: 450px;
      .title{
        color: #333;
        font-size: 20px;
        line-height: 30px;
        margin-top: 10px;
      }
      .info-md{
        margin: 10px 0 30px 0;
        line-height: 20px;
        .icon{
          width: 13px;
          height: 13px;
          display: inline-block;
          background: url('@/assets/icon.png') no-repeat;
          background-position: -70px -140px;
          vertical-align: middle;
          margin-right: 3px;
        }
        span{
          font-size: 12px;
          color: #666;
          line-height: 20px;
        }
        span:nth-child(3){
          color: #999;
        }
      }
      .info-btn{
        display: flex;
        div{
          margin-right: 7px;
        }
        a{
          display: inline-block;
          line-height: 31px;
          height: 31px;
          font-size: 12px;
        }
        .it-1{
          .a-1{
            width: 66px;
            height: 31px;
            background: url('@/assets/button2.png') no-repeat;
            background-position: 0 -632px;
            &:hover{
              background-position: 0 -718px;
            }
            span{
              color: #fff;
              font-size: 12px;
              margin-left: 35px;
            }
          }
          .a-2{
            width: 31px;
            height: 31px;
            vertical-align: middle;
            background: url('@/assets/button2.png') no-repeat;
            background-position: 0 -1587px;
            &:hover{
              background-position: -40px -1587px;
            }
          }
        }
        .it-2,.it-3,.it-4,.it-5{
          a{
            background: url('@/assets/button2.png') no-repeat;
            padding-right: 4px;
          }
        }
        .it-2{
          a{
            background-position: right -1191px;
            cursor: default;
            span{
              color: #ccc;
              display: inline-block;
              padding-left: 28px;
              background: url('@/assets/button2.png') no-repeat;
              background-position: 0 -1148px;
            }
          }
        }
        .it-3{
          width: 75px;
          a{
            background-position: right -1019px;
            &:hover{
              background-position: right -1105px;
              span{
                background-position: 0 -1267px;
              }
            }
            span{
              color: #333;
              display: inline-block;
              padding-left: 28px;
              background: url('@/assets/button2.png') no-repeat;
              background-position: 0 -1224px;
          
            }
          }
        }
        .it-4{
          width: 56px;
          a{
            background-position: right -1019px;
            &:hover{
              background-position: right -1105px;
              span{
                background-position: 0 -2804px;
              }
            }
            span{
              color: #333;
              display: inline-block;
              padding-left: 28px;
              background: url('@/assets/button2.png') no-repeat;
              background-position: 0 -2760px;
            }
          }
        }
        .it-5{
          width: 80px;
          a{
            background-position: right -1019px;
            &:hover{
              background-position: right -1105px;
              span{
                background-position: 0 -1507px;
              }
            }
            span{
              color: #333;
              display: inline-block;
              padding-left: 28px;
              background: url('@/assets/button2.png') no-repeat;
              background-position: 0 -1464px;
            }
          }
        }
      }
    }
  }
</style>